<template>
  <!-- <van-swipe :autoplay="3000" lazy-render style="width:300px;"> -->
  <van-swipe :autoplay="3000" lazy-render vertical style="height: 200px;">
    <van-swipe-item v-for="image in images" :key="image">
      <img :src="image" />
    </van-swipe-item>
  </van-swipe>
</template>

<script setup>
const images = [
  '/images/01.jpg',
  '/images/02.jpg',
  '/images/03.jpg',
  '/images/04.jpg'
]
</script>
<style>
.van-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}
.van-swipe-item img {
  width: 100%;
  height: 200px;
  display: block;
  box-sizing: border-box;
  padding: 30px 60px;
}
.van-swipe__indicator{
  background-color: black !important;
}
.van-swipe__indicator--active{
  background-color: #1989fa !important;
}
</style>
